<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI故事生成管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href='/static/css/1.css'>
    <link rel="stylesheet" href="/static/css/header.css">
    <link rel="stylesheet" href="/static/css/footer.css">
    <link rel="stylesheet" href='/static/css/index.css'>
    <script src="/static/js/header.js" defer></script>
    <script src="/static/js/index.js"></script>
</head>
<body>
{% include 'header.html' %}


    <!-- 主要内容区域 -->
    <main>
        <!-- 英雄区域 -->
        <section class="hero">
            <div class="container">
                <h1>用AI创造精彩故事</h1>
                <p>只需输入关键词，我们的AI就能为您生成独特、引人入胜的故事。无论是奇幻冒险、科幻世界还是浪漫爱情，一切尽在指尖。</p>
                <button class="btn btn-primary" onclick="location.href='/store_system/generate/'">开始创作</button>
            </div>
        </section>

        <!-- 功能展示区 -->
        <section class="features">
            <div class="container">
                <h2 class="section-title">核心功能</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h3>AI智能生成</h3>
                        <p>基于先进的人工智能技术，只需输入关键词即可生成高质量的故事内容。</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-edit"></i>
                        </div>
                        <h3>灵活编辑</h3>
                        <p>对生成的故事不满意？您可以随时编辑和调整内容，打造完美故事。</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-share-alt"></i>
                        </div>
                        <h3>分享社区</h3>
                        <p>将您的创作分享到社区，获得反馈和点赞，与其他创作者互动交流。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门故事区 -->
        <section class="stories">
            <div class="container">
                <h2 class="section-title">热门故事</h2>
                <div class="stories-grid">
                    <!-- Django模板代码 - 只显示前三个故事 -->
                    {% for story in featured_stories|slice:":3" %}
                    <div class="story-card" onclick="openStoryDetail({{ story.id }})">
                         <div class="story-img" style="background-image: url('/static/img/im{{ forloop.counter }}.png')"></div>
                        <div class="story-content">
                            <h3>{{ story.title }}</h3>
                            <div class="story-meta">
                                <span>
                                    {% for category in story.gategory.all %}
                                        {{ category.name }}{% if not forloop.last %}, {% endif %}
                                    {% endfor %}
                                </span>
                                <span>⭐ {{ story.likes }} 点赞</span>
                            </div>
                            <p>{{ story.content|truncatewords:30 }}</p>
                        </div>
                    </div>
                    {% empty %}
                    <div class="no-stories">
                        <p>暂无热门故事，快去创作吧！</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    </main>

    <!-- 故事详情模态框 -->
    <div id="storyModal" class="modal">
        <div class="modal-content">
            <span class="close-modal" onclick="closeStoryDetail()">&times;</span>
            <div id="storyDetailContent">
                <!-- 内容将由JavaScript动态生成 -->
            </div>
        </div>
    </div>

    {% include 'footer.html' %}


   
</body>
</html>